<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片懒加载(可视区域加载)</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        html,
        body {
            width: 100%;
            min-height: 100%;
        }

        #imgcontain {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #imgcontain .in {
            border: 1px solid red;
            margin: 10px;
            text-align: center;
            height: 400px;
            width: 400px;
            float: left;
        }

        .in img {
            border: none;
            vertical-align: middle;
            height: 400px;
            width: 400px;
        }
        .imgnofind{
            width: 5%!important;
            height: 5%!important;
            position: relative;
            top: 50%;
            transform: translate(-50%,-50%);

        }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
    <ul id="imgcontain">
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/1.png" onerror="imgNofind(this);"></li>
        <li class="in"><img src="" data-imgurl="img/2.png" onerror="imgNofind(this);"></li>

    </ul>

    <script type="text/javascript">
        var aImages = document.getElementById("imgcontain").getElementsByTagName('img'); //获取id为imgcontain的文档内所有的图片
        loadImg(aImages);
        window.onscroll = function() { //滚动条滚动触发
            loadImg(aImages);
        };
        //getBoundingClientRect 是图片懒加载的核心
        function loadImg(arr) {
            for (var i = 0, len = arr.length; i < len; i++) {
                if (arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {
                    arr[i].isLoad = true; //图片显示标志位
                    //arr[i].style.cssText = "opacity: 0;";
                    (function(i) {
                        setTimeout(function() {
                            if (arr[i].dataset) { //兼容不支持data的浏览器
                                aftLoadImg(arr[i], arr[i].dataset.imgurl);
                            } else {
                                aftLoadImg(arr[i], arr[i].getAttribute("data-imgurl"));
                            }
                            arr[i].style.cssText = "transition: 1s; opacity: 1;" //相当于fadein
                        }, 500)
                    })(i);
                }
            }
        }

        function aftLoadImg(obj, url) {
            var oImg = new Image();
            var imgobj = $(obj);
            oImg.onload = function(e) {
                e.stopPropagation();
                obj.src = oImg.src;
                imgobj.removeClass("imgnofind")//清除类
            }
            oImg.src = url; //oImg对象先下载该图像
        }

        function imgNofind(that){
            var img=event.srcElement;
            img.src="img/loading.gif";//loading
            $(that).addClass('imgnofind');
            img.onerror=null; //控制不要一直跳动
        }

    </script>
</body>

</html>
